<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>{$photo_files.name}-{$photo_files.suname}-{$C.webtitle}</title>
<meta content="{$C.webkeywords}" name="Keywords">
<meta name="description" content="{$C.webdescription}" />
<link href="__PUBLIC__/css/mengxing_dangan.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/mingxing.css"/>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/mxph_right.css"/>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/star_list.css"/>
<script src="./Public/js/jquery.js"></script>
<script type="text/javascript" src="./Public/js/top.js"></script>
<script type="text/javascript" src="./Public/js/move.js"></script>
<script type="text/javascript" src="./Public/js/jquery.SuperSlide.2.1.1.source.js"></script>
<script type="text/javascript" src="./Public/js/index.js"></script>
<script type="text/javascript" src="./Public/js/get_groups.js"></script>
<script type="text/javascript" src="./Public/js/public.js"></script>
<script type="text/javascript" src="./Public/js/add_comment.js"></script>

<script type="text/javascript">
//焦点图切换
$(function(){
	$(".slideBox").slide({mainCell:".bd ul",autoPlay:true});	
})
</script>
</head>
<body>
<div class="all">
<include file="Public:header"/>
	<div class="content">
		<div class="placeholder"></div>
		<div class="wrapper content">
			<!--当前位置-->
			<div class=" list_title clearfix">
				<div class="ti_left"> <a href="./" target="_blank">首页</a> > <a href="{:U('User/users')}" target="_blank">萌星</a> > <a href="{:U('User/users',array(suid=>$photo_files[suid]))}" target="_blank">{$photo_files.suname}</a> > <a href="{:U('Index/photos_show',array(id=>$photo_files[id]))}"> {$photo_files.name} </a> </div>
				<div class="ti_right">
					<div class="bdsharebuttonbox bdshare"> <a target="_blank" href="#" class="bds_tsina1" data-cmd="tsina" title="分享到新浪微博"></a> <a target="_blank" href="#" class="bds_qzone1" data-cmd="qzone" title="分享到QQ空间"></a> <a target="_blank" href="#" class="bds_weixin1" data-cmd="weixin" title="分享到微信"></a> <a target="_blank" href="#" class="bds_more1" data-cmd="more"></a> </div>
				</div>
			</div>
		</div>
		
		<div class="wrapper clearfix oh" style="margin-bottom:20px;">
			<div class="mingx oh">
				<div class="mxleft">
					<style type="text/css">
					.mxt1 .mxtr{ height:380px; width:96%; float:left; display:inline; margin-left:20px;}
					.mxt1 .mxtr p.t2{ overflow:hidden;line-height: 30px;}
					</style>
					<div class="nav"> <span><a href="{:U('Index/photos_show',array(id=>$photo_files[id]))}" style="color:#000;font-size:24px;">{$photo_files.suname} {$photo_files.name}</a></span> </div>
					<div class="mxt1 oh clearfix posr">
						<div class="mu_left clearfix">
							<style type="text/css">
							.users_xiangce{width:820px;height:auto;padding-bottom:30px;}
							.photo_files_title{width:100%;height:26px;line-height:26px;font-size:16px;text-align:center;}
							.user_photos_list{width:820px;height:66px;margin-top:20px;}
							.users_photos{width:741px;height:66px;overflow:hidden;float:left;position:relative;}
							.users_photos_ul{width:820000px;height:66px;position:absolute; left:0px;top:0px;}
							.users_photos_li{width:99px;height:66px;margin-right:8px;float:left;}
							.users_photos_li img{width:97px;height:64px;border:1px solid #fff;}
							.users_photos_prev{width:30px;height:66px;margin-right:9px;float:left;}
							.users_photos_next{width:30px;height:66px;margin-left:10px;float:left;}
							.u_p_tishi{width:100%;height:26px;line-height:26px;font-size:14px;text-align:center;}
							</style>
							<div class="u_p_tishi">点击大图查看下一张</div>
							<div class="users_xiangce">
								<a href="javascript:;" class="show_big_a" title="点击图片查看下一张"><img src="{$photo_files.url}" class="photos_show_big" width="820" /></a>
								<div class="user_photos_list">
									<div class="users_photos_prev">
										<a href="javascript:;"><img src="__PUBLIC__/images/prev.png" height="66" /></a>
									</div>
									<div class="users_photos">
										<div class="users_photos_ul">
											<volist name="photos" id="photos" key="i">
												<div class="users_photos_li users_photos_li_num{$i}">
													<a href="javascript:;"><img src="{$photos.url}" /></a>
												</div>
											</volist>
											<div class="clear"></div>
										</div>
									</div>
									<div class="users_photos_next">
										<a href="javascript:;"><img src="__PUBLIC__/images/next.png" height="66" /></a>
									</div>
									<div class="clear"></div>
								</div>
							</div>
							<script type="text/javascript">
							$(function(){
								var users_photos=$(".users_photos");   //获取最外层框架的名称
								var ul=$(".users_photos_ul");   
								var shownum=Math.ceil(users_photos.find(".users_photos_li").length/7); 
								var shownext=$(".users_photos_next a");//获取按钮
								var showprev=$(".users_photos_prev a");//获取按钮
								var oneWidth=749;  
								var timer=null;  //定时器返回值，主要用于关闭定时器
								var iNow=0;   //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
								
								/*手动点击按钮进行图片轮播代码开始*/
								shownext.click(function(){      //为每个按钮绑定一个点击事件   
									iNow=iNow+1;
									if(iNow>shownum-1){  //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
										iNow=0;
									}
									ul.animate({left:'-'+oneWidth*iNow+'px'});
								});
								showprev.click(function(){      //为每个按钮绑定一个点击事件   
									iNow=iNow-1;
									if(iNow<=-1){  //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
										iNow=shownum-1;
									}
									ul.animate({left:'-'+oneWidth*iNow+'px'});
								});
								$(".users_photos_li").each(function(){
									$(this).find("a").click(function(){
										var imgurl=$(this).find("img").attr("src");
										$(".users_photos_li").find("img").css("border","1px solid #fff");
										$(this).find("img").css("border","1px solid #f00");
										$(".photos_show_big").attr("src",imgurl);
									});
								});
								var firstimg=$(".users_photos_ul .users_photos_li:first").find("img").attr("src");
								$(".users_photos_ul .users_photos_li:first").find("img").css("border","1px solid #f00");
								$(".photos_show_big").attr("src",firstimg);
								var photo_num=1;
								$(".show_big_a").click(function(){
									if(photo_num>=users_photos.find(".users_photos_li").length){
										photo_num=1;
									}else{
										photo_num+=1;
									}
									$(".users_photos_li").find("img").css("border","1px solid #fff");
									$(".users_photos_li_num"+photo_num).find("img").css("border","1px solid #f00");
									$(".photos_show_big").attr("src",$(".users_photos_li_num"+photo_num).find("img").attr("src"));
								});
							});
							</script>
						</div>
					</div>
				</div>
				<!--右边开始-->
				<include file="Public:mxright"/>  
				<!--右边结束-->
			</div>
		</div>
		
	</div>

<include file="Public:bottom"/>    
